<template>
    <div class="the-right-box">
        <Rainfall class="rainfall-big-box" title="降雨量" :image="imageFive" />
        <MonitoringEquipment
            class="monitoring-equipment-big-box"
            title="监测设备接入统计"
            :image="imageSix"
        />
        <TailingPond class="tailing-pond-big-box" title="尾矿库地区分布" :image="imageSeven" />
    </div>
</template>

<script>
import Rainfall from "./component/Rainfall";
import MonitoringEquipment from "./component/MonitoringEquipment";
import TailingPond from "./component/TailingPond";

export default {
    name: "TheRight",

    components: {
        Rainfall,
        MonitoringEquipment,
        TailingPond,
    },

    data() {
        return {
            imageFive: require("@/asset/image/panel-pic-five.png"),
            imageSix: require("@/asset/image/panel-pic-six.png"),
            imageSeven: require("@/asset/image/panel-pic-seven.png"),
        };
    },
};
</script>

<style lang="scss" scoped>
.the-right-box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .rainfall-big-box {
        height: 280px;
    }
    .monitoring-equipment-big-box {
        height: 290px;
    }

    .tailing-pond-big-box {
        height: 210px;
    }
}
</style>
